<template>
  <div class="wp">
    <ul class="pageWp">
      <span style="padding:0 10px;">共{{total}}条</span>
      <zx-btn :disabled="currP==1" @click="pageChange(-1)" :round="true" size="is-small">&lt;</zx-btn>
      <template v-if="totalP>10">
        <li @click="pageClick(1)" :class="{'active':currP==1}">1</li>
        <li @click="pageChange(-5)" v-if="currP>4" class="dots">
          <span class="a">...</span>
          <span class="b">{{left}}</span>
        </li>

        <li @click="pageClick(page)" :class="{'active':currP==page}" v-for="page in pages">{{page}}</li>

        <li @click="pageChange(5)" v-if="currP<(totalP-3)" class="dots">
          <span class="a">...</span>
          <span class="b">{{right}}</span>
        </li>
        <li @click="pageClick(totalP)" :class="{'active':currP==totalP}">{{totalP}}</li>
      </template>
      <template v-else>
        <li @click="pageClick(n)" v-for="n in totalP" :key="n" :class="{'active':currP==n}">{{n}}</li>
      </template>
      <zx-btn :disabled="currP==totalP" @click="pageChange(1)" :round="true" size="is-small">&gt;</zx-btn>
      <select v-model="curPageSize" @change="selChange">
        <option v-for="(item,i) in options" :key="i" :value="item">每页显示{{item}}条</option>
      </select>
    </ul>
    <div>
      <zx-btn :disabled="currP==1" @click="pageChange(-1)" :round="true" size="is-small">上一页</zx-btn>
      <zx-btn :disabled="currP==totalP" @click="pageChange(1)" :round="true" size="is-small">下一页</zx-btn>
    </div>
  </div>
</template>

<script>
import ZxBtn from "./ZxBtn";
export default {
  props: {
    curP: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 5
    },
    total: {
      require: true,
      type: Number
    },
    pageSizeArr: {
      require: false,
      default: [1, 2, 5]
    }
  },
  data() {
    return {
      currP: this.curP,
      options: this.pageSizeArr,
      curPageSize: this.pageSize,
      left: "<<",
      right: ">>"
    };
  },
  watch: {
    curP() {
      this.currP = this.curP;
    },
    totalP(){
      if(this.currP>this.totalP){
        this.currP = this.totalP
      }
    }
  },
  computed: {
    totalP() {
      return Math.ceil(this.total / this.pageSize);
    },
    pages() {
      let start = this.currP - 2,
        end = this.currP + 2,
        arr = [];
      if (start < 2) {
        start = 2;
      }
      if (start > this.totalP - 4) {
        start = this.totalP - 4;
      }
      if (end < 5) {
        end = 5;
      }
      if (end >= this.totalP) {
        end = this.totalP - 1;
      }
      for (let i = start; i <= end; i++) {
        arr.push(i);
      }
      return arr;
    }
  },
  methods: {
    pageChange(p) {
      this.currP += p;
      this.currP < 1 ? (this.currP = 1) : null;
      this.currP > this.totalP ? (this.currP = this.totalP) : null;
      this.$emit("pageChange", this.currP);
    },
    pageClick(cp) {
      this.currP = cp;
      this.$emit("pageChange", this.currP);
    },
    selChange() {
      // console.log(this.curPageSize);
      this.$emit("pageSizeChange", this.curPageSize);
    }
  },
  components: {
    ZxBtn
  }
};
</script>

<style scoped>
.wp {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pageWp {
  display: flex;
  text-align: center;
  align-items: center;
}
.pageWp li {
  width: 30px;
  height: 30px;
  line-height: 30px;
  border: 1px solid #ccc;
  border-radius: 50%;
  margin-right: 5px;
  cursor: pointer;
}
.pageWp li.active {
  background-color: rgb(80, 154, 224);
  color: #fff;
}
button {
  margin-right: 5px;
}
.b {
  display: none;
}
.dots:hover .a {
  display: none;
}
.dots:hover .b {
  display: inline;
}
</style>
